// 等待所有依赖加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 确保全局变量可用
    const hljs = window.hljs || {};
    const marked = window.marked || {};
    const katex = window.katex || {};
    const DOMPurify = window.DOMPurify || { sanitize: text => text };

    // 创建Vue应用
    const { createApp, ref, nextTick, onMounted, watch } = Vue;

    const app = createApp({
        setup() {
            const userInput = ref('');
            const messages = ref([
                { role: 'ai', content: '你好！我是AI智能助手，有什么我可以帮助你的吗？' }
            ]);
            const memoryId = ref(1);
            const isStreaming = ref(false);
            const messagesContainer = ref(null);

            // 初始化Marked解析器
            const initMarked = () => {
                try {
                    // 创建安全的解析器实例
                    const markedInstance = marked.marked || marked;

                    // 创建自定义渲染器
                    const renderer = new markedInstance.Renderer();

                    // 自定义代码块渲染
                    renderer.code = (code, language) => {
                        // 处理数学公式
                        if (language === 'math' || language === 'tex') {
                            return `<div class="math-block">${code}</div>`;
                        }

                        // 安全处理代码内容
                        code = DOMPurify.sanitize(code);

                        // 处理代码高亮
                        let highlightedCode = '';
                        let detectedLanguage = language || 'plaintext';

                        try {
                            if (language && hljs.getLanguage) {
                                if (hljs.getLanguage(language)) {
                                    highlightedCode = hljs.highlight(code, { language }).value;
                                } else {
                                    // 如果指定的语言不存在，使用纯文本
                                    highlightedCode = hljs.highlight(code, { language: 'plaintext' }).value;
                                }
                            } else if (hljs.highlightAuto) {
                                // 尝试自动检测语言
                                const result = hljs.highlightAuto(code);
                                highlightedCode = result.value;
                                detectedLanguage = result.language || 'plaintext';
                            } else {
                                // 降级：如果hljs不可用，直接使用原始代码
                                highlightedCode = code;
                            }
                        } catch (e) {
                            console.error('代码高亮错误:', e);
                            highlightedCode = code; // 降级处理
                        }

                        // 构建代码块HTML，使用CSS控制语言标签显示
                        return `<pre><div class="code-language-tag">${detectedLanguage}</div><code class="hljs language-${detectedLanguage}">${highlightedCode || code}</code></pre>`;
                    };

                    // 自定义段落处理，避免与数学公式冲突
                    renderer.paragraph = (text) => {
                        return `<p>${text}</p>`;
                    };

                    // 配置Marked选项
                    markedInstance.use({
                        renderer: renderer,
                        gfm: true,
                        breaks: true,
                        pedantic: false,
                        sanitize: false, // 我们使用DOMPurify进行手动净化
                        smartLists: true,
                        smartypants: false // 关闭智能标点，避免与数学公式冲突
                    });

                    console.log('Marked初始化完成');
                } catch (e) {
                    console.error('Marked初始化错误:', e);
                }
            };

            // 解析Markdown
            const parseMarkdown = (text) => {
                if (!text) return '';

                try {
                    // 预处理公式
                    let processedText = text;

                    // 将行内公式$...$转换为KaTeX兼容格式
                    const inlineMathPlaceholders = [];
                    processedText = processedText.replace(/\$([^\$\n]+?)\$/g, (match, formula) => {
                        const placeholder = `INLINE_MATH_${inlineMathPlaceholders.length}`;
                        inlineMathPlaceholders.push({ placeholder, formula });
                        return placeholder;
                    });

                    // 将行间公式$$...$$转换为代码块格式
                    processedText = processedText.replace(/\$\$([\s\S]+?)\$\$/g, (match, formula) => {
                        return `\n\`\`\`math\n${formula}\n\`\`\`\n`;
                    });

                    // 使用marked解析
                    const markedInstance = marked.marked || marked;
                    let html = markedInstance.parse(processedText);

                    // 恢复行内公式
                    inlineMathPlaceholders.forEach(({ placeholder, formula }) => {
                        html = html.replace(placeholder, `<span class="inline-math">\\(${formula}\\)</span>`);
                    });

                    // 安全处理HTML
                    html = DOMPurify.sanitize(html, {
                        ADD_TAGS: ['math', 'mrow', 'mi', 'mo', 'mn', 'msup', 'msub', 'mfrac'],
                        ADD_ATTR: ['display']
                    });

                    return html;
                } catch (e) {
                    console.error('Markdown解析错误:', e);
                    // 降级：显示纯文本
                    return `<p>${DOMPurify.sanitize(text)}</p>`;
                }
            };

            // 渲染数学公式
            const renderMath = () => {
                nextTick(() => {
                    try {
                        const elements = document.querySelectorAll('.markdown-content');

                        elements.forEach(element => {
                            // 处理行内和行间公式
                            if (window.renderMathInElement) {
                                window.renderMathInElement(element, {
                                    delimiters: [
                                        {left: '\\(', right: '\\)', display: false},
                                        {left: '\\[', right: '\\]', display: true}
                                    ],
                                    throwOnError: false,
                                    errorColor: '#f56c6c'
                                });
                            }

                            // 处理math代码块
                            element.querySelectorAll('.math-block').forEach(block => {
                                try {
                                    if (katex && katex.render) {
                                        katex.render(block.textContent, block, {
                                            displayMode: true,
                                            throwOnError: false,
                                            errorColor: '#f56c6c'
                                        });
                                    }
                                } catch (e) {
                                    console.error('KaTeX渲染错误:', e);
                                    block.classList.add('math-error');
                                    block.textContent = '公式渲染错误: ' + block.textContent;
                                }
                            });
                        });
                    } catch (e) {
                        console.error('渲染数学公式错误:', e);
                    }
                });
            };

            // 应用代码高亮和数学公式渲染
            const applyFormatting = () => {
                nextTick(() => {
                    try {
                        // 再次应用代码高亮（处理可能的遗漏）
                        if (hljs && hljs.highlightAll) {
                            hljs.highlightAll();
                        }
                    } catch (e) {
                        console.error('代码高亮应用错误:', e);
                    }

                    // 渲染数学公式
                    renderMath();
                });
            };

            // 滚动到底部
            const scrollToBottom = () => {
                nextTick(() => {
                    if (messagesContainer.value) {
                        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
                    }
                });
            };

            // 发送消息
            const sendMessage = async () => {
                if (!userInput.value.trim() || isStreaming.value) return;

                // 添加用户消息
                messages.value.push({ role: 'user', content: userInput.value });

                // 准备AI回复占位符
                messages.value.push({ role: 'ai', content: '' });
                scrollToBottom();

                // 处理流式响应
                isStreaming.value = true;
                const aiMessageIndex = messages.value.length - 1;

                try {
                    // 使用工具调用接口
                    const response = await fetch(`/ai/assistantstreamingchat?memoryId=${memoryId.value}&question=${encodeURIComponent(userInput.value)}`);

                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();

                    while (true) {
                        const { done, value } = await reader.read();

                        if (done) {
                            break;
                        }

                        // 解码并追加到当前消息
                        const text = decoder.decode(value);
                        messages.value[aiMessageIndex].content += text;
                        scrollToBottom();
                    }
                } catch (error) {
                    console.error('Error:', error);
                    messages.value[aiMessageIndex].content = '很抱歉，请求出错了。请稍后再试。';
                } finally {
                    isStreaming.value = false;
                    userInput.value = ''; // 清空输入框
                    scrollToBottom();
                    // 在消息完全加载后应用格式化
                    applyFormatting();
                }
            };

            // 监听消息变化，应用格式化
            watch(messages, () => {
                nextTick(() => {
                    applyFormatting();
                });
            }, { deep: true });

            onMounted(() => {
                // 初始化
                initMarked();

                // 初始化代码高亮配置
                if (hljs && hljs.configure) {
                    hljs.configure({
                        ignoreUnescapedHTML: true
                    });
                }

                // 确保KaTeX自动渲染函数可用
                if (!window.renderMathInElement && window.katex && window.katex.renderMathInElement) {
                    window.renderMathInElement = window.katex.renderMathInElement;
                }

                scrollToBottom();
                console.log('应用初始化完成');
            });

            return {
                userInput,
                messages,
                memoryId,
                isStreaming,
                messagesContainer,
                parseMarkdown,
                sendMessage
            };
        }
    });

    app.use(ElementPlus);
    app.mount('#app');
});
